<template>
    <el-dialog v-model="isShow" v-bind="$attrs" title="新用户添加" :close-on-click-modal="false">
        <!--  -->
        <el-form :model="user" :rules="userRules" ref="form">
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
                <el-input v-model="user.mobile"></el-input>
            </el-form-item>
        </el-form>
        <!--  -->
        <template #footer>
            <span>
                <el-button @click="$emit('update:model-value',false)">取消</el-button>
                <el-button type="primary" @click="execCallback()">更新</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ElNotification } from "element-plus";
import { userRules } from "@/rules/userRules.js";
import { updateUseInfo } from "@/api/userApi.js";
export default {
    data() {
        return {
            userRules,
            user: {
                id:"",
                email:"",
                mobile:""
            }
        }
    },
    props:["model-value"],
    emits:["update:model-value","reload"],
    computed: {
        isShow:{
            get(){
                return this.modelValue;
            },
            set(nv){
                this.$emit("update:model-value",nv)
            }
        }
    },
   
    methods: {
        async execCallback() {
            // 数据校验
            await this.$refs.form.validate()
            // 异步请求
            let result = await updateUseInfo(this.user.id,this.user)
            // 失败
            if(result===null) return;
            // 成功
            this.$emit("update:model-value",false)
            // 消息提示
            ElNotification.success({
                title:`用户“${this.user.username}”信息修改完成`
            })
            // 当前dailog的一些内容变量需要清空
            this.user = {
                username:"",
                password:"",
                email:"",
                mobile:""
            }
            // 完成页面数据的更新
            this.$emit("reload")
        }
    },
}
</script>

<style lang="scss" scoped></style>